<template>
	<view>
		<!--专题-->
		<view class="padding-lr">
			<view @tap="clickTopic(item)" class="padding-bottom padding-top solid-bottom" :style="index>0?'solid-top':''" v-for="(item,index) in topics"
			 :key="index">
				<image mode="aspectFill" style="width: 100%;height: 160px;object-fit: cover;" :src="item.img"></image>
				<view class="padding-top-xs" style="overflow: hidden;
				text-overflow: ellipsis; 
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;">{{item.name}}</view>
			</view>
			<view v-if="topics.length==0" class="text-center padding text-grey">暂无数据</view>
		</view>
	</view>
</template>

<script>
	var page = 1;
	export default {
		data() {
			return {
				topics: []
			}
		},onLoad() {
			this.initTopcis();
		},onReachBottom() {
			page++;
			this.initTopcis();
		},onPullDownRefresh() {
			this.topics = [];
			page = 1;
			this.initTopcis();
			uni.stopPullDownRefresh();
		},methods:{
			//专题
			initTopcis() {
				this.$get('mall/topic/commonpage',{current:page}).then((res) => {
					//console.log(res) 
					if (res.data) {
						this.topics = this.topics.concat(res.data.items);
					}
				})
			},
			clickTopic(item) { //点击 专题
				this.$jump('/pages/topic/detail?topicId=' + item.id)
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
